<template>
  <a-tabs v-model:activeKey="activeKey" v-show="panelHidden">
    <a-tab-pane key="1">
      <template #tab v-show="tabHidden">
        <span>
          <BarChartOutlined />
          基础字段
        </span>
      </template>
      <div>
        <a-row v-show="panelHidden">
          <a-col :span="18">
            <a-form-item label="Panel框">
              <a-switch v-model:checked="dataC.options.panel" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="18">
            <a-form-item label="panel标题">
              <a-input
                style="width: 200px"
                v-model:value="dataC.options.panelTitle"
                placeholder="请输入"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="18">
            <a-form-item label="panel左右边距" class="mb-1">
              <a-input-number
                style="width: 200px"
                v-model:value="dataC.options.panelPadding"
                placeholder="请输入数字"
              ></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
  import { Getsqlcolumns } from '@/api/report/api'
  import { BarChartOutlined, SearchOutlined } from '@ant-design/icons-vue'
  export default {
    components: {
      BarChartOutlined,
      SearchOutlined,
    },
    props: {
      data: {
        type: Object,
        default: Object,
      },
      formData: {
        type: Object,
        default: Object,
      },
      panelHidden: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        show: true,
        dataC: this.data,
        sqlData: [], //后台返回的sql列名
        activeKey: '1', //tab切换的标识
      }
    },

    created() {
      console.log('dataC', this.dataC)
    },
    methods: {
      selectSQL() {
        var that = this
        this.show = false
        Getsqlcolumns({
          DbId: 'ce91cc3e-58fb-200d-51fc-39fa7895033f',
          Sql: that.dataC.options.sql,
        }).then((res) => {
          if (res.isSuccess) {
            var tableData = []
            res.content.items.forEach((element) => {
              tableData.push({
                field: element,
                lable: element,
              })
            })
            this.dataC.options.tableSetting = tableData
            this.show = true
            console.log('dataC1111111111', this.dataC)
          } else {
            this.$message.error('sql语句语法错误' + res.message)
            this.show = true
          }
        })
      },
    },
  }
</script>
